<!-- 模板 -->
<template>
  <div class="root">
    <van-pull-refresh
      class="xiala"
      pulling-text
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <div class="header">
        <h3>消息</h3>
        <div class="clear">
          <img
            src="http://42.192.80.102/Printing man-img/xiaoxiqingchu.png"
            alt=""
          />
          <span @click="clear">消息未读</span>
        </div>
      </div>
      <MyHeader></MyHeader>
      <div class="icon">
        <img src="http://42.192.80.102/Printing man-img/@.png" alt="" />
        <img src="http://42.192.80.102/Printing man-img/info.png" alt="" />
        <img src="http://42.192.80.102/Printing man-img/hongbao.png" alt="" />
        <img
          src="http://42.192.80.102/Printing man-img/youhuiquan.png"
          alt=""
        />
      </div>
      <div class="msg">
        <ul>
          <li class="lii" @click="fn" v-for="item in msg" :key="item.id">
            <div class="msg_left">
              <img :src="item.imgUrl" alt="" />
              <div class="txt">
                <p>{{ item.title }}</p>
                <span>{{ item.txt }}</span>
              </div>
            </div>
            <div class="time">
              {{ item.time }}
              <van-badge class="demo" :content="20" />
            </div>
          </li>
        </ul>
      </div>
      <MyFoots></MyFoots>
    </van-pull-refresh>
  </div>
</template>
<script>
// import request from '../utils/request.js'
import MyHeader from "./MyHeader.vue";
import MyFoots from "./MyFoots.vue";
import { Toast } from "vant";
export default {
  name: "",
  data() {
    return {
      count: 0,
      isLoading: false,
      msg: [
        {
          id: 1,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
        {
          id: 2,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
        {
          id: 3,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
        {
          id: 4,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
        {
          id: 5,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
        {
          id: 6,
          imgUrl: "http://42.192.80.102/Printing man-img/beauty-girl.png",
          title: "名片天下小分队",
          txt: "[166条]如花是我:今日推荐",
          time: "20:05",
        },
      ],
    };
  },
  props: [],
  components: {
    MyHeader,
    MyFoots,
  },
  computed: {},
  filters: {},
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
      setTimeout(() => {
        window.location.reload();
      }, 2000);
    },
    fn() {
      this.$router.push("/news_tall");
    },

    clear() {
      let arr = document.querySelectorAll(".van-badge");
      for (var i = 0; i < arr.length; i++) {
        arr[i].innerHTML = "";
        arr[i].className = "";
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.root {
  .van-badge {
    position: absolute;
    left: 0.72rem;
    top: -0.1rem;
    display: block;
    width: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.4rem;
    font-size: 0.2rem;
  }
  margin-top: 0.2rem;
  .header {
    display: flex;
    align-items: center;
    padding-left: 0.42rem;
    padding-top: 0.2rem;
    h3 {
      font-size: 0.48rem;
      margin-right: 0.32rem;
    }
    .clear {
      display: flex;
      align-items: center;
      padding-top: 0.22rem;
      img {
        width: 0.24rem;
      }
      span {
        font-size: 0.24rem;
      }
    }
  }
  .icon {
    padding-left: 0.42rem;
    display: flex;
    align-items: center;
    img {
      width: 0.28rem;
      margin-right: 0.58rem;
    }
  }
  .msg {
    padding: 0.32rem;
    ul {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 0.1rem;
        position: relative;
        padding: 0.1rem 0;
        .msg_left {
          display: flex;
          align-items: center;
          margin-bottom: 0.08rem;
          img {
            width: 0.96rem;
            margin-right: 0.1rem;
          }
          .txt {
            display: flex;
            flex-direction: column;
            p {
              font-size: 0.28rem;
              font-weight: 500;
              margin-bottom: 0.08rem;
            }
            span {
              font-size: 0.2rem;
              font-weight: 400;
            }
          }
        }
        .time {
          font-size: 0.24rem;
        }
      }
    }
  }
}
</style>
